<template>
  <div>
    <!-- 功能一模板 -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div v-if="showDivFlag">一个被控制显隐的div</div>
  </div>
  <div>
    <!-- 功能二模板 -->
    <button @click="changeRed">红色</button>
    <button @click="changeBlue">蓝色</button>
    <div :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
  </div>
</template>

<script>
// import { ref } from 'vue'
// export default {
//   name: 'App',
//   setup () {
//     // 功能一
//     const showDivFlag = ref(true)
//     function show () {
//       showDivFlag.value = true
//     }
//     function hide () {
//       showDivFlag.value = false
//     }
//     // 功能二

//     const fontColor = ref('')
//     function changeRed () {
//       fontColor.value = 'red'
//     }
//     function changeBlue () {
//       fontColor.value = 'blue'
//     }
//     return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
//   }
// }
import { ref } from 'vue'
// 控制显示隐藏（可以单独拆分到js中=》模块化）
function useShow () {
  const showDivFlag = ref(true)
  function show () {
    showDivFlag.value = true
  }
  function hide () {
    showDivFlag.value = false
  }
  return { showDivFlag, show, hide }
}
// 控制样式
function useColor () {
  const fontColor = ref('')
  function changeRed () {
    fontColor.value = 'red'
  }
  function changeBlue () {
    fontColor.value = 'blue'
  }
  return { fontColor, changeRed, changeBlue }
}
export default {
  name: 'App',
  setup () {
    // 功能一
    const { showDivFlag, show, hide } = useShow()
    // 功能二
    const { fontColor, changeRed, changeBlue } = useColor()
    return { showDivFlag, show, hide, fontColor, changeRed, changeBlue }
  }
}
</script>
